<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>注册</title>
		<link rel="stylesheet" th:href="@{../public/webregistered.css}">
		<script src="https://cdn.bootcss.com/blueimp-md5/2.0.0/js/md5.js"></script>
		<style>
			#showToast {
				z-index: 1000;
				position: absolute;
				left: 0;
				top: 0;
				width: 100vw;
				/* height: 100vh; */
				background-color: #000;
				opacity: 0.5;
				display: none;
			}
			.content {
				z-index: 1001;
				position: absolute;
				right: 0;
				left: 0;
				top: 0;
				bottom: 0;
				margin: auto;
				color: #FFFFFF;
				height: 80vh;
				text-align: center;
				line-height: 80vh;
				display: none;
			}
			.right_top {
				width: 40vw;
				height: 30vh;
				z-index: 1002;
				position: absolute;
				right: 2vh;
				top: 7vh;
				display: none;
			}
			
			.show {
				display: block !important;
			}
		</style>
	</head>
	<body>
		<div class="login_page" id="login">
			<div class="login_body">
				<div class="login_title" font-weight="bolder">
					<!--账号注册 | Ver. 1.44-->
					欢迎注册
				</div>

				<div class="form_body">
					<!-- 手机号/邮箱 -->
					<div class="form_item">
						<div class="form_content">
							<div class="form_item_left">

								<div class="form_input">
									<!--<img th:src="@{../public/imgxy/login-user-icon.png}" style="width:22px;height: 22px;"/>-->
									<input type="text" id="phone" style="margin-top: 8px; margin-left: 10px;" placeholder="请输入手机号码">
								</div>
							</div>
						</div>
						<div class="form_tips">

						</div>
					</div>
					<!-- 密码 -->
					<div class="form_item">
						<div class="form_content">
							<div class="form_item_left">

								<div class="form_input">
									<!-- <img th:src="@{../public/imgxy/login-password-icon.png}" style="width:22px;height: 22px;"/>-->
									<input style="margin-top: 8px; margin-left: 10px;" placeholder="请设置登录密码" type="password" id="password">
								</div>
							</div>
						</div>
						<div class="form_tips">

						</div>
					</div>
					<!-- 输入手机/邮箱验证码 -->
					<div class="form_item">
						<div class="form_content">
							<div class="form_item_left">
								<div class="form_input">
									<!--<img th:src="@{../public/imgxy/login-user-icon.png}" style="width:22px;height: 22px;"/>-->
									<input type="text" style="margin-top: 8px; margin-left: 10px;" placeholder="短信验证码" id="verify">
								</div>
							</div>
							<div class="form_item_right">
								<div class="verifyBtn">
									获取验证码                        
								</div>
								<div class="verifyTips"></div>
							</div>
						</div>
						<div class="form_tips">

						</div>
					</div>


					<!-- &lt;!&ndash; 确认密码 &ndash;&gt;
            <div class="form_item">
                <div class="form_content">
                    <div class="form_item_left">

                        <div class="form_input">
                            <img th:src="@{../public/imgxy/login-password-icon.png}" style="width:22px;height: 22px;"/>
                            <input style="margin-top: 8px; margin-left: 10px;" placeholder="再次输入登录密码" type="password"
                                   id="newPassword">
                        </div>
                    </div>
                </div>
                <div class="form_tips">

                </div>
            </div>-->

					<!-- 输入邀请码 -->
					<div class="form_item">
						<div class="form_content">
							<div class="form_item_left">
								<div class="form_input">
									<!--<img th:src="@{../public/imgxy/login-password-icon.png}" style="width:22px;height: 22px;"/>-->
									<input type="text" th:value="${inviteCode}" disabled id="InvitationCode">
								</div>
							</div>
						</div>
						<div class="form_tips">

						</div>
					</div>


					<div class="form_btn">
						<button class="button" id="register" style="background-color: #f8536b;border-radius: 30px;">
							确定
						</button>
					</div>
					<div class="form_btn">
						<button class="button" id="download" style=";border-radius: 30px;color:#ff4400;background-color: white;border: 2px solid #8B0000;font-weight:bold">
							下载APP
						</button>
					</div>

				</div>
			</div>

			<div class="popups">
				<div class="popups_bg"></div>
				<div class="popups_body">
					<div class="title">
						是否立即去下载App
					</div>

					<div class="btns">
						<div class="btn_item no">
							取消
						</div>

						<div class="btn_item" id="xiaZai">
							确定
						</div>
					</div>
				</div>
			</div>
			
		</div>
		
		<!-- 微信打开时的弹框 -->
		<div id="showToast">
			<div class="content">
				请点击右上角，选择在浏览器打开~
			</div>
			<!--<img src="../public/imgxy/rightTop.png" class="right_top">-->
			<img th:src="@{../public/imgxy/rightTop.png}" class="right_top"/>
		</div>
	</body>

	<script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.js"></script>
	<script>
		$(function() {
			// 检查是否通过微信打开
			function is_weixin() {
				var ua = navigator.userAgent.toLowerCase();
				if (ua.match(/MicroMessenger/i) == "micromessenger") {
					return true;
				} else {
					return false;
				}
			}
			let isWeixin = is_weixin();
			let winHeight = $(window).height();
			console.log('是否在微信打开:', isWeixin)
			
			// 如果是在微信打开的 显示提示弹框
			if (isWeixin) {
				$("#showToast").css("height", winHeight);
				$("#showToast").show();
				$(".content").show();
				$(".right_top").show();
			}
			
			
			var url = '';
			$(".form_body input").each(function() {
				$(this).on({
					focus: function(e) {

					},
					blur: function(e) {
						if ($(this).val() != "") {
							$(this).parents(".form_content").next().text()
						}
					}
				})
			})


			var verify = {
				phone: /^1[3456789]\d{9}$/,
			}

			$(".verifyBtn").click(function() {
				var val = $("#phone").val();

				if (val == "") {
					$("#phone").parents(".form_content").next().text("手机号不能为空")
					return;
				}

				if (verify.phone.test(val)) {
					senCode();
					$.ajax({
						type: "post",
						url: "/xgb/sendSmsCode",
						dataType: "json",
						data: {
							"mobile": val,
							"key": md5("Vhta6YpievbqRZIj02OAfxwMKWmFPSkc" + val)
						},
						success: function(res) {
							if (res.code == 200) {}
						}
					});
					console.log("手机号：" + val)

				} else {
					$("#phone").parents(".form_content").next().text("手机号格式不正确")
				}

			})

			// 注册
			$("#register").click(function() {
				var phone = $("#phone").val(),
					password = $("#password").val(),
					newPassword = $("#newPassword").val(),
					InvitationCode = $("#InvitationCode").val(),
					verify = $("#verify").val();

				if (phone == "") {
					$("#phone").parents(".form_content").next().text("手机号不能为空")
					return;
				}

				if (password == "") {
					$("#password").parents(".form_content").next().text("密码不能为空")
					return;
				}

				// if (newPassword == "") {
				// 	$("#newPassword").parents(".form_content").next().text("请再次输入密码")
				// 	return;
				// }

				// if (newPassword != password) {
				// 	$("#newPassword").parents(".form_content").next().text("两次输入密码不一致")
				// 	return;
				// }

				if (InvitationCode == "") {
					$("#InvitationCode").parents(".form_content").next().text("邀请码不能为空")
					return;
				}

				if (verify == "") {
					$("#verify").parents(".form_content").next().text("验证码不能为空")
					return;
				}
				$.ajax({
					type: "post",
					url: "/web/registered1",
					dataType: "json",
					data: {
						"mobile": phone,
						"password": password,
						"verCode": verify,
						"invCode": InvitationCode
					},
					success: function(res) {
						if (res.code == 200) {
							url = res.data;
							$(".popups").show()
						} else {
							alert(res.message);
						}
					}
				});
			})

			$(".popups_bg").click(function() {
				$(".popups").hide()
			})

			$(".btn_item.no").click(function() {
				$(".popups").hide()
			})

			$("#xiaZai").click(function() {
				window.location.href = url
			})
			$("#download").click(function () {
                window.location.href = "https://fenfanew.niukeying.cn/app.php/389"
        })

			function senCode() {
				var timer_num = 60;
				var time = setInterval(() => {
					timer_num--;
					$(".verifyBtn").css({
						"display": "none"
					}).next().show().html(timer_num + 's后重新获取');

					if (timer_num == 0) {
						clearInterval(time);
						$(".verifyBtn").next().html("0")
						$(".verifyTips").css({
							"display": "none"
						}).prev().show().html("获取验证码");
					}
				}, 1000);
			}
		})
	</script>

</html>
